<template>
  <div>
    <div style="margin: 20px;background-color: #eeeeee;padding: 20px">
      <el-row class="regAgent-erow">
        <el-col :span="24">
          <div class="regAgent-title">注册地址</div>
          <div class="regAgent-con">{{ form.url }}</div>
        </el-col>
      </el-row>
      <el-row class="regAgent-erow">
        <el-col :span="24">
          <div class="regAgent-title">推送邮件</div>
          <div class="regAgent-con">
            <el-row>
              <el-col :span="8">
                <el-form ref="form" :model="form" label-width="140px" :rules="rules">
                  <el-form-item label="邮件地址" prop="email">
                    <el-input v-model="form.email" placeholder="请输入企业邮件地址" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" :loading="clickLoading" @click="clickSendMail('form')">推送邮件</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row class="regAgent-erow" style="height: 300px">
        <el-col :span="24">
          <div class="regAgent-title">注册二维码</div>
          <div class="regAgent-con">  手机端注册地址：{{qrContent}}
            <div ref="qrcode" class="qrcode" />
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import QRCode from 'qrcode'
import { sendMail, getIdentifier } from '@/api/ent'
export default {
  name: 'RegManagement',
  data() {
    const validateEmail = (rule, value, callback) => {
      // const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      const regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        callback(new Error('请填写邮箱'))
      } else if (value.length < 1) {
        callback(new Error('请填写邮箱'))
      } else if (!regEmail.test(value)) {
        callback(new Error('请填写正确邮箱'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      clickLoading: false,
      qrContent: 'http://qifu.xlshuju.cn/regAgentPhone',
      form: {
        url: 'http://qifu.xlshuju.cn/registerAgent',
        email: ''
      },
      msg: '',
      rules: {
        email: [
          { required: true, trigger: 'change', validator: validateEmail }
        ]
      }
    }
  },
  created() {
    this.inGetIdentifier()
  },
  methods: {
    clickSendMail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.clickLoading = true
          sendMail(this.form).then(response => {
            if (response.result === 1) {
              this.$message({
                message: '投递成功', type: 'success'
              })
            } else {
              this.$message({
                message: '投递失败', type: 'warning'
              })
            }
            this.clickLoading = false
          }).catch(() => {
            this.clickLoading = false
            this.$message({
              message: '投递失败', type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    },
    inGetIdentifier() {
      getIdentifier().then(response => {
        if (response.result === 1) {
          this.msg = response.msg
          this.form.url = this.form.url + '?identifier=' + response.msg
        }
        this.generateQRCode(response.msg)
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$message({
          message: '加载失败', type: 'warning'
        })
      })
    },
    generateQRCode(msg) {
      this.qrContent = this.qrContent + '?identifier=' + msg
      QRCode.toDataURL(this.qrContent)
        .then(url => {
          this.$refs.qrcode.innerHTML = ''
          this.$refs.qrcode.appendChild(this.createQRImg(url))
        })
        .catch(err => {
          console.error(err)
        })
    },
    createQRImg(url) {
      const img = document.createElement('img')
      img.src = url
      return img
    }
  }
}
</script>

<style scoped>
  .regAgent-erow {
    background-color: #ffffff;
    margin-bottom: 40px;
    height: 230px;
  }
.regAgent-title{
  width: 100%;
  border-bottom: 1px #d0d0d0 solid;
  padding: 10px;
}
  .regAgent-con{
    padding: 10px;
    /*border: 1px #d0d0d0 solid;*/
    margin: 25px;
    height: 140px;
  }
</style>
